<template>
  <div class="app-container">
    <git-navigation />
    <el-row style="margin-top: 30px">
      <el-col :span="16" :offset="1">
        <div class="grid-content">
          <div class="project-first-name">{{ Project.FirstName }}</div>
          <div class="fll ml20">
            <h1 class="project-name">
              {{ Project.name }} &nbsp;&nbsp;
              <el-tag size="mini" type="success">{{ Project.visibility }}</el-tag>
            </h1>
            <div class="project-id">项目ID：{{ Project.id }}</div>
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="grid-content">
          <el-dropdown :hide-on-click="false" trigger="click" style="float: right">
            <el-button type="primary" size="mini">
              克隆
              <i class="el-icon-arrow-down el-icon--right" />
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>
                <span style="font-weight:600">使用SSH克隆</span>：
              </el-dropdown-item>
              <el-dropdown-item>
                <el-input v-model="Project.ssh_url_to_repo" autosize placeholder="请输入内容">
                  <el-button
                    slot="append"
                    v-clipboard:copy="Project.ssh_url_to_repo"
                    v-clipboard:success="onCopy"
                    v-clipboard:error="onError"
                    class="el-icon-document-copy"
                  />
                </el-input>
              </el-dropdown-item>
              <el-dropdown-item>
                <span style="font-weight:600">使用HTTPS克隆</span>：
              </el-dropdown-item>
              <el-dropdown-item>
                <el-input v-model="Project.http_url_to_repo" autosize placeholder="请输入内容">
                  <el-button
                    slot="append"
                    v-clipboard:copy="Project.http_url_to_repo"
                    v-clipboard:success="onCopy"
                    v-clipboard:error="onError"
                    class="el-icon-document-copy"
                  />
                </el-input>
              </el-dropdown-item>
              <el-dropdown-item>
                <span style="font-weight:600">快捷克隆</span>：
              </el-dropdown-item>
              <el-dropdown-item>
                <el-input v-model="gitCloneUrl" autosize placeholder="请输入内容">
                  <el-button
                    slot="append"
                    v-clipboard:copy="gitCloneUrl"
                    v-clipboard:success="onCopy"
                    v-clipboard:error="onError"
                    class="el-icon-document-copy"
                  />
                </el-input>
              </el-dropdown-item>
              <el-dropdown-item divided>&nbsp;</el-dropdown-item>
              <el-dropdown-item>git账号：{{ UserOauth.GitLabUser }}</el-dropdown-item>
              <el-dropdown-item>git密码：</el-dropdown-item>
              <el-dropdown-item>
                <el-input v-model="UserOauth.GitLabPwd" placeholder show-password />
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </el-col>
    </el-row>
    <el-row class="mt30">
      <el-col :span="22" :offset="1">
        <el-link :underline="false" class="mr20">
          -o-
          <strong style="color: #000;">{{ Project.statistics.commit_count }}次提交</strong>
        </el-link>
        <el-link :underline="false" class="mr20">
          <i class="el-icon-s-operation" />
          <strong style="color: #000">{{ branchesCount }}个分支</strong>
        </el-link>
        <el-link :underline="false" class="mr20">
          <i class="el-icon-price-tag" />
          <strong style="color: #000">{{ tagNum }}个标签</strong>
        </el-link>
        <el-link :underline="false" class="mr20">
          <i class="el-icon-folder-remove" />
          <strong style="color: #000">{{ tagNum }}个文件</strong>
        </el-link>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="22" :offset="1">
        <div class="grid-content">
          <el-progress :percentage="100" :format="formatProgress" color="#f56c6c" />
        </div>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="22" :offset="1">
        <el-select
          v-model="nowbranche"
          class="fll"
          :loading="branchLoading"
          @visible-change="getBranchTag"
          @change="handleBrance"
        >
          <el-option-group label="分支">
            <el-option
              v-for="item in branches"
              :key="item.name"
              :label="item.name"
              :value="item.name"
            />
          </el-option-group>
          <el-option-group label="标签">
            <el-option v-for="item in tags" :key="item.name" :label="item.name" :value="item.name" />
          </el-option-group>
        </el-select>

        <el-breadcrumb separator="/" class="project-branch">
          <el-breadcrumb-item>
            <a href="javascript:void(0);" @click="handleGoRoot">{{ Project.name }}</a>
          </el-breadcrumb-item>
          <template v-for="item in breadcrumb">
            <el-breadcrumb-item v-if="item.name !== 'root'">
              <a href="javascript:void(0);" @click="handleGoBread(item)">{{ item.name }}</a>
            </el-breadcrumb-item>
          </template>
        </el-breadcrumb>
        <div class="flr">
          <el-button size="small">历史</el-button>
          <el-button size="small">查找文件</el-button>
          <el-button size="small">Web IDE</el-button>
          <el-button size="small">
            <i class="el-icon-download" />
          </el-button>
        </div>
      </el-col>
    </el-row>

    <el-row class="mt20">
      <el-col :span="22" :offset="1">
        <div class="grid-content commit-record">
          <div class="commit-img">
            <img :src="gitUser.avatar_url" class="img">
          </div>
          <div class="fll ml20 mt10">
            <h1 class="commit-title">
              <el-link>{{ TopCommits.title }}</el-link>
            </h1>
            <div class="commit-author">
              由 {{ TopCommits.committer_name }} 提交于 {{
                handleFormatTime(TopCommits.committed_date) }}
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
    <!--
    <el-col :span="5" :offset="7">
      <el-button-group class="commit-detail">
        <el-button>
          <router-link :to="commitDetailUrl(commitItem.commit.id)">{{commitItem.commit.short_id }}</router-link>
        </el-button>
        <el-button>
          <i
            v-clipboard:copy="commitItem.commit.id"
            v-clipboard:success="onCopy"
            v-clipboard:error="onError"
            class="el-icon-document-copy"
          />
        </el-button>
        <el-button @click="openFile(commitItem.commit.id)">
          <i class="el-icon-folder-opened" />
        </el-button>
      </el-button-group>
    </el-col>-->

    <el-row class="mt30">
      <el-col v-if="isFiles === false" :span="22" :offset="1">
        <template>
          <el-table
            v-loading="listLoading"
            :data="tableData"
            element-loading-text="Loading"
            highlight-current-row
            border
            style="width: 100%"
          >
            <el-table-column label="名称" width="300">
              <template slot-scope="scope">
                <i v-if="scope.row.type === 'tree'" class="el-icon-folder" />
                <i v-if="scope.row.type === 'blob'" class="el-icon-tickets" />
                <span style="margin-left: 10px" @click="handleName(scope.row)">
                  <a href="javascript:void(0)">{{ scope.row.name }}</a>
                </span>
              </template>
            </el-table-column>
            <el-table-column prop="commitTitle" label="最后提交" width="300" />
            <el-table-column
              prop="commitCreateTime"
              label="最后更新"
              :formatter="handleCommitCreateTime"
            />
          </el-table>
        </template>
      </el-col>

      <el-col v-if="isFiles === true" :span="22" :offset="1">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span style="font-weight: bold">{{ fileInfo.FileName }}</span>
            {{ fileInfo.FileSize }}字节
          </div>
          <pre v-html="fileInfo.content" />
        </el-card>
      </el-col>
    </el-row>

    <!-- <el-row v-if="isIndex === true" style="margin-top: 30px">
      <el-col :span="22" :offset="1">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span style="font-weight: bold">README.md</span>
          </div>
          <template>
            <p>
              <vue-markdown :source="readme" />
            </p>
          </template>
        </el-card>
      </el-col>
    </el-row>-->
  </div>
</template>

<script>
import { getData } from '@/api/requestData';
import { parseTime } from '@/utils/index';
// import VueMarkdown from 'vue-markdown';
import GitNavigation from './components/GitNavigation';

export default {
  components: {
    // VueMarkdown,
    GitNavigation
  },
  data() {
    return {
      listLoading: true,
      branchLoading: true,
      tags: [] /**/, // 标签 工程详情未返回tag数量
      tagNum: 0, // 标签数量
      tableData: [], // 文件列表
      branches: [], // 分支列表
      branchesCount: 0, // 分支数量
      nowbranche: '', // 当前分支
      projectName: '',
      ProjectId: '', // 当前项目ID
      nowpath: '', // 当前路径
      isIndex: '', // 是否首页
      isFiles: '', // 是否文件
      fileInfo: {}, // 文件内容
      readme: '', // README内容
      gitCloneUrl: '',
      Project: {
        // 项目信息
        statistics: {
          commit_count: 0
        },
        visibility: ''
      },
      TopCommits: {
        // 头部commit提交信息
        committed_date: ''
      },
      gitUser: {}, // git用户信息
      breadcrumb: [], // 面包屑
      UserOauth: {
        GitLabUser: '',
        GitLabPwd: ''
      } // git账号密码
    };
  },
  created() {
    this.projectName = this.$route.params.projectName;
    this.fetchData();
  },
  methods: {
    onCopy(e) {
      // 复制成功
      this.$message.success('复制成功');
    },
    onError(e) {
      // 复制失败
      this.$message('复制失败');
    },
    fetchData() {
      this.listLoading = true;
      // 获取用户列表
      const pid = this.$route.params.pid;
      // const codeName = this.$route.params.codeName
      const codeBranch = this.$route.params.codeBranch;
      const codeRef = this.$route.params.codeRef;
      getData('git/code/' + pid + '/' + codeBranch + '/' + codeRef)
        .then((res) => {
          this.listLoading = false;
          this.tableData = res.data.list;
          this.nowbranche = res.data.nowbranche;
          this.ProjectId = res.data.ProjectId;
          this.gitCloneUrl = res.data.gitCloneUrl;
          if (res.data.nowpath === '') res.data.nowpath = 'root';
          this.nowpath = res.data.nowpath;
          this.isIndex = res.data.isIndex;
          this.isFiles = res.data.isFiles;
          this.readme = res.data.readme;
          this.tagNum = res.data.tagNum;
          res.data.Project.tag_list = res.data.Project.tag_list.length;
          this.Project = res.data.Project;
          res.data.fileInfo.content = this.formatCode(
            res.data.fileInfo.content
          );
          res.data.Project.FirstName = res.data.Project.name.substring(0, 1);
          this.fileInfo = res.data.fileInfo;
          this.TopCommits = res.data.TopCommits;
          this.gitUser = res.data.gitUser;
          this.UserOauth = res.data.UserOauth;
          this.branches = res.data.branches;
          this.branchesCount = res.data.branches.length;
          var breadcrumb = this.nowpath.split('&');
          var ppath = '';
          var i = 1;
          for (var p in breadcrumb) {
            if (i < breadcrumb.length) {
              ppath = ppath + breadcrumb[p] + '-';
            } else {
              ppath = ppath + breadcrumb[p];
            }
            var tmpBreadcrumb = { name: breadcrumb[p], path: ppath };
            this.breadcrumb.push(tmpBreadcrumb);
            i++;
          }
          if (codeRef !== 'root') {
            this.tableData.unshift({
              name: '..',
              commitTitle: '',
              commitCreateTime: ''
            });
          }
        })
        .catch(() => {
          this.listLoading = false;
        });
    },
    formatProgress(percentage) {
      return '';
    },
    formatCode(code) {
      return code;
    },
    handleName(row) {
      if (row.name === '..') {
        this.$router.go(-1);
        return;
      }
      var path = row.path.replace(/\//g, '&');
      this.$router.push({
        path:
          '/git/code/' +
          this.ProjectId +
          '/' +
          this.projectName +
          '/' +
          this.nowbranche +
          '/' +
          path
      });
    },
    handleBrance(row) {
      this.$router.push({
        path:
          '/git/code/' +
          this.ProjectId +
          '/' +
          this.projectName +
          '/' +
          row +
          '/' +
          this.nowpath
      });
    },
    handleGoRoot(row) {
      this.$router.push({
        path:
          '/git/code/' +
          this.ProjectId +
          '/' +
          this.projectName +
          '/' +
          this.nowbranche +
          '/root'
      });
    },
    handleGoBread(row) {
      this.$router.push({
        path:
          '/git/code/' +
          this.ProjectId +
          '/' +
          this.projectName +
          '/' +
          this.nowbranche +
          '/' +
          row.path
      });
    },
    handleCommitCreateTime(row) {
      if (row.commitCreateTime === undefined || row.commitCreateTime === '') { return ''; }
      return this.handleFormatTime(row.commitCreateTime);
    },
    getBranchTag() {
      const pid = this.$route.params.pid;
      getData('/git/public/branch/tag/' + pid).then((res) => {
        this.branches = res.data.branches;
        this.tags = res.data.tags;
        this.branchLoading = false;
      });
    },
    handleCate(url) {
      this.$router.push({ path: url });
    },
    handleFormatTime(times) {
      var minute = 1000 * 60;
      var hour = minute * 60;
      var day = hour * 24;
      var week = day * 7;
      var month = day * 30;

      var time1 = new Date().getTime(); // 当前的时间戳
      var time2 = Date.parse(new Date(parseTime(times))); // 指定时间的时间戳
      var time = time1 - time2;
      var result = null;
      if (time < 0) {
        alert('设置的时间不能早于当前时间！');
      } else if (time / month >= 1) {
        result = parseInt(time / month) + '月前';
      } else if (time / week >= 1) {
        result = parseInt(time / week) + '周前';
      } else if (time / day >= 1) {
        result = parseInt(time / day) + '天前';
      } else if (time / hour >= 1) {
        result = parseInt(time / hour) + '小时前';
      } else if (time / minute >= 1) {
        result = parseInt(time / minute) + '分钟前';
      } else {
        result = '刚刚';
      }
      return result;
    }
  }
};
</script>

<style scoped lang='scss'>
@import '../../styles/main.css';
.grid-content {
  min-height: 36px;
  .project-first-name {
    width: 62px;
    height: 64px;
    background-color: rgb(224, 242, 241);
    border-radius: 10px;
    align-self: center;
    margin: 0px;
    font-size: 32px;
    text-align: center;
    line-height: 64px;
    float: left;
  }
  .project-name {
    font-size: 20px;
    line-height: 15px;
    font-weight: bold;
  }
  .project-id {
    font-weight: normal;
    font-size: 14px;
    line-height: 16px;
  }
}
.project-branch {
  float: left;
  line-height: 2.7;
  padding-left: 10px;
}
.commit-record {
  height: 76px;
  line-height: 76px;
  background: #fafafa;
  color: #2e2e2e;
  border: 1px solid #e5e5e5;
  border-radius: 4px;
  margin-bottom: 16px;
  .commit-img {
    width: 50px;
    height: 50px;
    float: left;
    padding-top: 13px;
    padding-left: 10px;
    .img {
      width: 50px;
      height: 50px;
      border-radius: 50px;
    }
  }
  .commit-title {
    font-size: 16px;
    line-height: 15px;
    font-weight: 600;
  }
  .commit-author {
    font-size: 14px;
    line-height: 16px;
  }
}
.commit-detail {
  margin-right: -30px;
  margin-top: 14px;
  float: right;
}
/deep/ .el-progress-bar {
  padding-right: 0;
}
</style>
